<template>
<SubLayout :breadcrumb="false" @refresh="getInfo" :showRefresh="true">
    <template #bread>
      <router-link to="/webview-register/registered">界面列表</router-link>
      <el-icon class="route-icon"> <arrow-right /> </el-icon>
    </template>
    <template #default>
      <!-- 详情 -->
      <InfoArea :data="dataInfo" />
    </template>
    <!-- 页脚 -->
    <template #footer>
      <footer v-if="dataInfo.status === 0">
      <router-link :to="`/webview-register/register/${dataInfo.id}`">
        <el-button type="primary">修改</el-button>
      </router-link>
    </footer>
    </template>
  </SubLayout>

</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import { ArrowRight } from '@element-plus/icons-vue'
import InfoArea from "../components/Info.vue";
import { useRouter, useRoute } from 'vue-router';
import SubLayout from '@/components/SubLayout';
import { aprrove, getDetail } from "@/api/webview-register";
import { getTagListById } from '@/utils'
export default defineComponent({
  name: "MeansCascadeDetail",
  components: {
    InfoArea,
    SubLayout,
    ArrowRight
  },
  setup(props, { emit, slots }) {
    const router = useRouter()
    const route = useRoute()
    const goBack = () => {
      router.back()
    }
    const dataInfo = ref({})
    const getInfo = async() => {
      const res = await getDetail(route.params.id)
      res.data.tagNames = res.data.guiTag?getTagListById(res.data.guiTag):''
      dataInfo.value = res.data
    }
    onMounted(() => {
      getInfo();
    });

    return {
      dataInfo,
      goBack,
      getInfo
    };
  },
});
</script>
<style lang="scss" scoped>
.page-main {
  position: relative;
  padding-bottom: 70px;
}

footer {
  text-align: right;
  margin-top: 20px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  height: 70px;
  padding: 0 20px;
  line-height: 70px;
  background: #fff;
}
</style>